﻿/*
Copyright (c) Microsoft Corporation

All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0   

THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT.  

See the Apache Version 2.0 License for specific language governing permissions and limitations under the License.  
*/

/* CSS Styling for the Game Page */


html, body {
	margin: 0;
	height: 100%;
	width: 100%;
	padding: 0;
    background-image: url('../media/gamesky_lores.png');
}

.hidden {
    display:none;
}
#container{
	height: 1366px;
	width: 768px;
	position: absolute;
	left: 0;
	top: 0;
}
#game_canvas {

	margin-left: 0px;
    position:absolute;
    top:0px;
}

/* InGame UI Elements */
#hikerkills {
    color:orange;
    font-weight:500;
    font-family:fridge;
    font-size: 50px;
    position:absolute;
    z-index:2;
    top:1%;
    left:85%;
}

#snowball_btn {
    position:absolute;
    top:88.5%;
    left:35%;
    background-color:red;
    opacity: 0.0;
    width:32%;
    height: 10.5%;
    z-index:3;
}
#touch_ui {
    width:100%;
    height:100%;
}
#left_btn {
    position:absolute;
    top:89%;
    left:4%;
    background-color:red;
    opacity: 0.0;
    width:18%;
    height: 10%;
    z-index:3;
}
#right_btn {
    position:absolute;
    top:89%;
    left:80%;
    background-color:red;
    opacity: 0.0;
    width:18%;
    height: 10%;
    z-index:3;
}
/* Game Over UI */
/* UI Elements for the game over screen */
#gameover_ui {
    position:absolute;
    top:22%;
    left:4%;
    width:89%;
    height: 28%;
    z-index:3;
}

#gameover_restart {
    position:absolute;
    top:64%;
    left:12%;
    background-color:green;
    opacity: 0;
    width:38%;
    height: 22%;
}

#gameover_menu {
    position:absolute;
    top:64%;
    left:52%;
    background-color:blue;
    opacity: 0;
    width:38%;
    height: 22%;
}